<template>
  <div>
    <el-dialog
      :title="isAdd ? '添加菜单' : '编辑菜单'"
      :visible.sync="isShow"
      :before-close="cancel"
      center
    >
      <el-form :model="menuForm" :rules="rules" ref="menuForm">
        <el-form-item
          label="菜单名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input autocomplete="off" v-model="menuForm.title"></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
          <el-select
            placeholder="请选择上级菜单"
            v-model="menuForm.pid"
            @change="changepid"
          >
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option
              v-for="item in menulist"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
          <!--  -->
        </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth">
          <el-radio disabled v-model="menuForm.type" :label="1">目录</el-radio>
          <el-radio disabled v-model="menuForm.type" :label="2">菜单</el-radio>
        </el-form-item>

        <!-- 图标  -->
        <el-form-item
          label="菜单图标"
          :label-width="formLabelWidth"
          v-if="menuForm.type == 1"
        >
          <!-- <el-input autocomplete="off" v-model="menuForm.icon"></el-input> -->
          <el-select placeholder="请选择菜单图标" v-model="menuForm.icon">
            <el-option
              v-for="item in menuIconList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 地址 -->
        <el-form-item label="菜单地址" :label-width="formLabelWidth" v-else>
          <!-- <el-input autocomplete="off" v-model="menuForm.url"></el-input> -->
          <el-select placeholder="请选择菜单地址" v-model="menuForm.url">
            <el-option
              v-for="item in routersMenu"
              :key="item.path"
              :label="item.meta.title"
              :value="item.path"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 开关 -->
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="menuForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <!-- 确认取消 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入添加接口
import { menuadd, menuinfo, menuedit } from "../../require/api";

import { mapActions, mapGetters } from "vuex";

// 引入封装好的路由信息
import { routersMenu } from "../../router/index";
export default {
  data() {
    return {
      //表单对象
      menuForm: {
        id: 0, //编号，必填项
        pid: "", //上级分类编号
        title: "", //标题
        icon: "", //图标
        type: 1, //类型1目录2菜单
        url: "", //菜单地址
        status: 1, //状态1正常2禁用,
      },
      formLabelWidth: "120px",

      rules: {
        title: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
        pid: [{ required: true, message: "请输入上级菜单", trigger: "change" }],
      },
      // 菜单图标合集
      menuIconList: [
        "el-icon-user",
        "el-icon-star-off",
        "el-icon-goods",
        "el-icon-setting",
        "el-icon-picture-outline",
        "el-icon-bell",
      ],
      // 路由信息
      routersMenu: routersMenu,
    };
  },
  props: ["isShow", "isAdd"],
  computed: {
    ...mapGetters({ menulist: "menu/getMenu" }),
  },
  methods: {
    ...mapActions({
      getMenuAction: "menu/getMenuAction",
    }),
    //上级菜单选择决定type类型
    changepid() {
      this.menuForm.type = this.menuForm.pid == 0 ? 1 : 2;
    },
    // 重置设置
    reset() {
      this.menuForm = {
        id: 0, //编号，必填项
        pid: "", //上级分类编号
        title: "", //标题
        icon: "", //图标
        type: 1, //类型1目录2菜单
        url: "", //菜单地址
        status: 1, //状态1正常2禁用,
      };
      //对验证重置
      this.$refs.menuForm.resetFields();
    },
    // 取消按钮关闭弹窗
    cancel() {
      // console.log("11");
      this.reset();
      this.$emit("cancel", false);
    },
    // 获取一条信息
    lookup(id) {
      // 请求修改一条的数据
      menuinfo({ id }).then((res) => {
        console.log(res, "====");
        if (res.code == 200) {
          // 成功提示
          this.$message.success(res.msg);
          //数据回显
          this.menuForm = res.list;
          this.menuForm.id = id;
        } else {
          // 提示
          this.$message.error(res.msg);
        }
      });
    },
    // 确认提交表单
    confirm() {
      // console.log("22");
      this.$refs.menuForm.validate((valid) => {
        if (valid) {
          // 判断是新增还是修改
          if (this.isAdd) {
            // 调添加接口
            menuadd(this.menuForm).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                //提示成功
                this.$message.success(res.msg);
                // 关闭弹窗
                this.cancel();
                //调用列表接口更新列表
                this.getMenuAction();
              } else {
                //提示错误信息
                this.$message.error(res.msg);
              }
            });
          } else {
            //修改接口
            menuedit(this.menuForm).then((res) => {
              console.log(res, "000");
              // 关闭弹窗
              this.cancel();
              // 更新页面
              this.getMenuAction();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang=less scoped >
</style>
